<template>
	<view class="page">
		<view class="search-box">
			<input type="text" placeholder="请输入位置名称" @input="change" @confirm="search" auto-focus="true" v-model="searchText" />
			<text @click="search">搜索</text>
		</view>
		<view class="pois">
			<view class="pois-list" v-for="(item, index) in pois" :key="item.id+item.adcode" @click="select(index)">
				<view>
					<view class="name">
						{{ item.name }}
					</view>
					<view class="address">
						{{ item.address }}
					</view>
				</view>
				<uni-icons v-if="selectId == item.id" type="checkbox-filled" size="44" :color="mainColor"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
import { mainColor } from '@/config/index.js'
import amap from '@/utils/amap-wx.130.js';
const AmapFun = new	amap.AMapWX({key: 'a7c7e8d9655710d294d8d6db64374eda'});
export default {
	data() {
		return {
			searchText: '',
			
			pois: [],
			
			selectId: '',
			setT: '',
      
      mainColor,
		}
	},
	
	
	methods: {
		
		change() {
			clearTimeout(this.setT);
			this.setT = setTimeout(() => {
				this.search();
			}, 250);
		},
		
		// 搜索位置
		search () {
			AmapFun.getInputtips({
				keywords: this.searchText.trim(),
				location: '',
				success: res => {
					this.pois = res.tips;
				}
			})
		},
		
		// 选择位置
		select(idx) {
			const item = this.pois[idx]
			this.selectId = item.id;
			uni.$emit('select:searchAddress', item);
			this.$$p.back({ delay: 500 });
		}
	}
}
</script>

<style lang="scss" scoped>
.page{
	padding-top: 114rpx;
	box-sizing: border-box;
}
.search-box{
	width: 750rpx;
	padding: 24rpx 24rpx;
	box-sizing: border-box;
	@include flex-row;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	/* #ifdef H5 */
	top: 88rpx;
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	left: 0;
	background-color: #f3f3f3;
	z-index: 2;
	input{
		height: 66rpx;
		width: 600rpx;
		font-size: 24rpx;
		background-color: #fff;
		padding: 0 24rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}
	text{
		display: inline-block;
		width: 80rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: $main-color;
		color: #fff;
	}
}

.pois{
	background-color: #fff;
	&-list{
		margin: 0 24rpx;
		padding: 24rpx 0;
		border-bottom: 1px dashed #f3f3f3;
		@include flex-row;
		align-items: center;
		justify-content: space-between;
	}
	.name{
		color: #333;
	}
	.address{
		font-size: 24rpx;
		color: #999;
	}
}
</style>
